<template>
  <div class="container">
    <Breadcrumb :items="['数据分析', '问卷统计']" />
    <a-space direction="vertical" :size="16" fill>
      <!--地图-->
      <ChinaMapV2 />

      <!--四个小的-->
      <DataChainGrowth />
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import questionDataSurveyStore from '@/store/modules/data-screen';
  import DataOverview from './components/data-overview.vue';
  import DataChainGrowth from './components/data-chain-growth.vue';
  import UserActions from './components/user-actions.vue';
  import ContentTypeDistribution from './components/content-type-distribution.vue';
  import ContentPublishingSource from './components/content-publishing-source.vue';
  import ChinaMap from './components/china-map.vue';
  import ChinaMapV2 from './components/china-map-v2.vue';

  const questionData = questionDataSurveyStore();

  // const id = '1588914049915138049';
  //
  //
  // questionData.questions = [
  //   {
  //     // 该题总回答人数
  //     total: 100,
  //     id: '321',
  //     // 问题类型 0 是填空 单选是1 多选是2
  //     questionType: 1,
  //     // 题面
  //     stem: '请选择饮品',
  //     // 返回字符串 “bar”
  //     chartType: 'bar',
  //     // 下一个题的Id
  //     choices: [
  //       {
  //         name: '酒水',
  //         value: 13,
  //       },
  //       {
  //         name: '饮料',
  //         value: 34,
  //       },
  //       {
  //         name: '茶',
  //         value: 21,
  //       },
  //       {
  //         name: '其他',
  //         value: 32,
  //       },
  //     ],
  //   },
  //   {
  //     // 该题总回答人数
  //     total: 100,
  //     id: '321',
  //     // 问题类型 0 是填空 单选是1 多选是2
  //     questionType: 0,
  //     // 题面
  //     stem: '请选择酒水',
  //     // 返回字符串 “bar”
  //     chartType: 'line',
  //     choices: [
  //       {
  //         name: '红酒',
  //         value: 53,
  //       },
  //       {
  //         name: '白酒',
  //         value: 20,
  //       },
  //       {
  //         name: '啤酒',
  //         value: 27,
  //       },
  //     ],
  //   },
  //   {
  //     // 该题总回答人数
  //     total: 100,
  //     id: '321',
  //     // 问题类型 0 是填空 单选是1 多选是2
  //     questionType: 2,
  //     // 题面
  //     stem: '茶',
  //     chartType: 'wordcloud',
  //     choices: [
  //       {
  //         name: '龙井',
  //         value: 32,
  //       },
  //       {
  //         name: '铁观音',
  //         value: 24,
  //       },
  //       {
  //         name: '绿茶',
  //         value: 43,
  //       },
  //       {
  //         name: '发的',
  //         value: 48,
  //       },
  //       {
  //         name: '个人的',
  //         value: 36,
  //       },
  //       {
  //         name: '割让给',
  //         value: 42,
  //       },
  //     ],
  //   },
  //   // {
  //   //   // 该题总回答人数
  //   //   total: 1,
  //   //   id: '321',
  //   //   // 问题类型 0 是填空 单选是1 多选是2
  //   //   questionType: 2,
  //   //   // 题面
  //   //   stem: '其他',
  //   //   chartType: 'line',
  //   //   choices: [
  //   //     {
  //   //       content: '第三题的A选项',
  //   //       choiceQuantity: 11,
  //   //     },
  //   //     {
  //   //       content: '第三题的B选项',
  //   //       choiceQuantity: 300,
  //   //     },
  //   //     {
  //   //       content: '第三题的C选项',
  //   //       choiceQuantity: 67,
  //   //     },
  //   //     {
  //   //       content: '第三题的D选项',
  //   //       choiceQuantity: 122,
  //   //     },
  //   //   ],
  //   // },
  //   // {
  //   //   // 该题总回答人数
  //   //   total: 500,
  //   //   id: '321',
  //   //   // 问题类型 0 是填空 单选是1 多选是2
  //   //   questionType: 2,
  //   //   // 题面
  //   //   stem: '第五题',
  //   //   chartType: 'line',
  //   //   choices: [
  //   //     {
  //   //       content: '第三题的A选项',
  //   //       choiceQuantity: 11,
  //   //     },
  //   //     {
  //   //       content: '第三题的B选项',
  //   //       choiceQuantity: 300,
  //   //     },
  //   //     {
  //   //       content: '第三题的C选项',
  //   //       choiceQuantity: 67,
  //   //     },
  //   //     {
  //   //       content: '第三题的D选项',
  //   //       choiceQuantity: 122,
  //   //     },
  //   //   ],
  //   // },
  // ];
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  :deep(.section-title) {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 16px;
  }

  :deep(.chart-wrap) {
    height: 264px;
  }
</style>
